<template>
  <dialog_item :dialogTitle="$t('select_icon')" @onBtnDialogClick="onBtnDialogClick" :visible.sync="iconSelectVisible" dialogClass="icon_select dialogPaddingTop0" v-if="iconSelectVisible" :isShowConfirmBtn="true">
    <el-container >
      <div class="custonIcon">
        <el-tabs v-model="activeTab">
          <el-tab-pane :label="$t('picture_icon')" name="imgIcon" style="height:300px;overflow-y:scroll">
            <div class="custonImgCon">
              <el-col v-for="(item,index) in imgIcons" :key="index"   style="margin-bottom:10px;display:inline;width:auto">
                <el-tooltip class="item" effect="light" :content="item.name" placement="top" >
                  <div v-bind:class="{'divRelative':true,'imgIconCheck':index == imgIconCurrent}" @click="checkedImgIcon(item,index)">
                    <!-- @click.native="checkedIcon(item,index)" -->
                    <img id="_iconImg" class="iconImg" alt :src="getUrl(item.path)"  />
                    
                  </div>
                </el-tooltip>
              </el-col>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="$t('customIcon')" name="customIcon" style="height:300px;overflow-y:scroll">
            <div class="customIconCon">
              <el-button @click="onUpload" type="primary" plain size="small">{{$t('upload_icon')}}</el-button>
              <el-button @click="onEdit" v-if="noDelete"  type="primary" plain size="small">{{$t('batch_editing')}}</el-button>
              <el-button @click="onCancleDel" v-if="haveDelete"  type="primary" plain size="small">{{$t('cancel_edit')}}</el-button>
              <el-button @click="onDelete()" v-if="haveDelete"  type="danger" plain size="small">{{$t('batch_delete')}}</el-button>
              <el-checkbox 
              :indeterminate="isIndeterminate" 
              v-model="checkAll" 
              @change="handleCheckAllChange" 
              v-if="haveDelete">{{$t('select_all')}}</el-checkbox>

            </div>
            <div  class="customIconList">
              <el-col v-for="(item,index) in upIcons" :key="index"  style="margin-top:10px;display:inline;width:auto">
                <el-tooltip class="item" effect="light" :content="item.name" placement="top" >
                  <div
                    v-bind:class="{'divRelative':true,'upIconCheck':index == upIconCurrent}"
                    @click="checkedupIcon(item,index)">
                    <img class="iconImg" id="_iconImg" alt  :src="getUrl(item.path)" />
                    <div :class="{'divAbsolution':true,'displayNone':checkDelete}">
                      <el-checkbox-group v-model="selectIcon" style="">
                        <el-checkbox :label="item.path"  style="" >
                          {{emptyValue}}
                        </el-checkbox>
                        
                      </el-checkbox-group>
                    </div>
                  </div>
                </el-tooltip>
              </el-col>
            </div>
            
          </el-tab-pane>
        </el-tabs>
        
      </div>
      
    </el-container>
    
    <fileUpload :visible.sync="fileUploadVisible" v-if="fileUploadVisible" :nowOption="nowOption" @checkUpload="onCheckUpload" @del="onDelete"/>
    
    </dialog_item>
</template>

<script>

import fileUpload from "@/components/fileUpload.vue";

export default {
  data(){
    return {
      imgIcons:[],
      activeTab:"imgIcon",
      fileUploadVisible:false,
      nowOption:"iconUpload",
      imgIconCurrent:-1,
      selectIcon:[],
      iconToolTipVisible:false,
      upIcons:[],
      upIconCurrent:-1,
      checkDelete:true,
      haveDelete:false,
      noDelete:true,
      emptyValue:"",
      checkAll:false,
      isIndeterminate:true,
    }
  },
  watch:{
    selectIcon:function(newval){
      this.selectIcon=newval;
    }
  },
  components:{
    fileUpload,  
  },
  created() {
    this.getIcon();
    this.getUpIcons();
  },
  computed: {
    iconSelectVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  props: ["visible","logoUrl"],
  methods: {
    onBtnDialogClick(name){
      if(name=='confirm'){
        this.onOk()
      }
    },
    handleCheckAllChange(val) {
      if(val){
        this.upIcons.forEach(elm=>{
          this.selectIcon.push(elm.path)
        })
      }else{
        this.selectIcon=[];
      }

      this.isIndeterminate = false;
    },
    onCancel(){
      this.iconSelectVisible=false;
    },
    onEdit(){
      this.checkDelete=false;
      this.noDelete=false;
      this.haveDelete=true;

    },
    onCancleDel(){
      this.checkDelete=true;
      this.noDelete=true;
      this.haveDelete=false;
    },
    onDelete(delIcon){
      if(delIcon){
        this.selectIcon=delIcon;
      }
      if(this.selectIcon.length==0){
        this.$message({
          showClose: true,
          message: "请先选择一个图标!",
          type: "error"
        });
        return false;
      }
      this.checkDelete=true;
      this.noDelete=true;
      this.haveDelete=false;

      this.$api.deleteUpLogo(
        {data:this.selectIcon},
        {
          onSucess: resp => {
            if(resp.data.errcode==0){
              this.$message({
                      showClose: true,
                      message: this.$t('msg_del_success'),
                      type: "success"
                    });
              this.getUpIcons();
              this.selectIcon=[]
            }
          },
        }
      );
    },
    onOk(){
      this.iconSelectVisible=false;
      if(this.imgIconCurrent!=-1){
        this.$emit("select-ok", this.imgIcons[this.imgIconCurrent]);
      }
      else if(this.upIconCurrent!=-1){
        this.$emit("select-ok", this.upIcons[this.upIconCurrent]);
      }

    },
    onUpload(){
      this.fileUploadVisible=true;
    },
    onBack(){
      this.getIcon();
    },
    getIcon(){
      let that=this;
      this.$api.getLogos(
        "",
        {
          onSucess: resp => {
            // this.imgIcons = resp.data.data;
            resp.data.data.forEach((el)=>{
              if(el.path.indexOf(".png")!=-1||el.path.indexOf(".jpg")!=-1||el.path.indexOf(".gif")!=-1){
                that.imgIcons.push(el);
              }
            })
            if(that.logoUrl){
              that.imgIcons.forEach((elm,index) => {
                if(elm.path.indexOf(that.logoUrl)!=-1){
                  that.imgIconCurrent=index;
                }
                elm.name=elm.name.replace(/p[0-9]{2,}_/,"")
              })
            }
          }
        }
      );
      
    },
    getUpIcons(){
      this.$api.getLogos(
        '/uploads/lib/icon/upload',
        {
          onSucess: resp => {
            this.upIcons = resp.data.data;
            
          }
        }
      );
    },
    onCheckUpload(){
      this.getUpIcons()
      

    },
    checkedImgIcon(item,index){
      this.imgIconCurrent=index;
      // this.fontIconCurrent=-1;
      this.upIconCurrent=-1;
      this.checkIcon=item;
    },
    checkedupIcon(item,index){
      this.upIconCurrent=index;
      this.imgIconCurrent=-1;
      // this.fontIconCurrent=-1;
      this.checkIcon=item;
    },
    getUrl(url){
      return this.$api.getLogoUrl(url)
    },
  },
};
</script>
<style scoped> 
@import '../assets/css/font-awesome.min.css';

</style>
<style lang="scss" scoped>


</style>